<template>
  <div style="width: 1200px;margin: auto" v-show="albumDetailVisible">
    <album-detail-show :album-detail="albumDetail"></album-detail-show>
    <div class="table-operator">
      <el-button @click="handleSongAdd" type="primary" icon="el-icon-plus">新增</el-button>
    </div>
    <el-table
        :data="songList"
        stripe
        style="width: 100%">
      <el-table-column
          prop="songName"
          label="歌曲"
          width="500">
      </el-table-column>
      <el-table-column
          prop="singer"
          label="歌手"
          width="180"
          :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
          prop="time"
          label="时长"
      >
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <a @click="handleSongEdit(scope.row)">编辑</a>
          <el-divider direction="vertical" />
          <a @click="handleSongDelete(scope.row.id)">删除</a>
        </template>
      </el-table-column>
    </el-table>
    <song-model ref="songModelForm" @ok="songModelFormOk"></song-model>

  </div>
</template>

<script>
import songModel from "@/views/Music/components/SongModel";
import albumDetailShow from "@/views/Music/components/AlbumDetailShow";
import {deleteSong, getAlbumDetail, getSongByAlbum} from "@/plugins/api";
export default {
  name: "Detail",
  components:{albumDetailShow,songModel},
  data(){
    return{
      albumDetailVisible:false,
      albumDetail:{
        // name:"杜康",
        // singer:'GAI周延',
        // imgurl:"https://y.qq.com/music/photo_new/T002R300x300M000001y2s2E3Tb63d.jpg?max_age=2592000",
        // date:"2022-05-06",
        // language:"国语",
        // recordcompany:"种梦音乐",
        // type:"录音室专辑",
      },
      songList:[],
        // {
        //   name:"烻",
        //   singer:'GAI周延',
        //   imgUrl:"https://y.qq.com/music/photo_new/T002R300x300M00000151T621ThPul_1.jpg?max_age=2592000",
        //   date:"2021-02-05",
        //   language:"国语",
        //   recordCompany:"能量悦动",
        //   type:"录音室专辑",
        // },
        // {
        //   name:"光宗耀祖",
        //   singer:'GAI周延',
        //   imgUrl:"https://y.qq.com/music/photo_new/T002R300x300M000003MS8RP1GyP9f_1.jpg?max_age=2592000",
        //   date:"2018-10-10",
        //   language:"国语",
        //   recordCompany:"种梦音乐",
        //   type:"录音室专辑",
        // },
    }
  },
  methods:{
    getAlbumDetail(aid){
      let _this = this
      getAlbumDetail(aid).then(function (msg) {
        _this.albumDetail = msg.data.albumDetail
        document.title= _this.albumDetail.name + "专辑详情"
      })
      var urlSearchParams = new URLSearchParams();
      urlSearchParams.set("aid", aid)
      getSongByAlbum(urlSearchParams).then(function (msg) {
        _this.songList = msg.data.songList
      })
    },
    songModelFormOk() {
      let aid=this.albumDetail.id;
      // 新增/修改 成功时，重载列表
      this.getAlbumDetail(aid);
    },
    handleSongAdd(){
      var record={
        aid:this.albumDetail.id,
      }
      this.$refs.songModelForm.method='add'
      this.$refs.songModelForm.add(record)
      this.$refs.songModelForm.title="新增歌曲"
      this.$refs.songModelForm.songModelVisible=true
    },
    handleSongDelete(id){
      var _this=this;
      deleteSong("id="+id).then(function (msg){
        if(msg.code==200){
          _this.$message.success(msg.msg);
          _this.getAlbumDetail(_this.albumDetail.id);
        }else{
          _this.$message.warning(msg.msg);
        }
      })
    },
    handleSongEdit(record){
      this.$refs.songModelForm.method='edit'
      this.$refs.songModelForm.edit(record)
      this.$refs.songModelForm.title="编辑歌曲信息"
      this.$refs.songModelForm.songModelVisible=true
    },
  },
  created() {

  },

}
</script>

<style scoped>

.el-button{
  padding: 10px 20px;
  color: #FFF;
  background: rgb(255, 111, 20);
  border-color: rgb(255, 111, 20);
}
.el-button:focus,.el-button:hover{
  color: #FFF;
  background-color:rgb(251, 138, 26);
  border-color: rgb(251, 138, 26);
}

a:hover{
  color: rgb(255, 111, 20);
}
a{
  color: rgb(249, 165, 142);
}

</style>